<template>
	<view v-if="id==1">
		<!-- 积分 -->
		<view class="integral">
			<text class="title">近期积分记录</text>
			<view class="integral-box" v-for="(item,index) in listData" :key="index">
				<view class="left">
					<!-- 店名+什么方式的积分(次卡消费、前台充值、小程序会员充值) -->
					<text class="name">{{item.StockName}}  {{item.FRemark}} 新增</text>
					<text class="tiem">{{item.FDate}}</text>
				</view>
				<view class="right">
					<text class="price">{{item.FPoint+item.FSetPoint}}</text>
					<text class="unit">积分</text>
				</view>
			</view>
			<uni-load-more class="loadmore" :status="tabItem.loadingType"></uni-load-more>
		</view>
		<view class="integral-base">
			<view class="left">
				<text class="base-title">积分</text>
				<text class="price">{{integra}}</text>
			</view>
			<text class="topUp" @click="navTo()">积分商城<text class="yticon icon-you"></text></text>
		</view>
	</view>
	<view v-else>
		<!-- 余额 -->
		<view class="balance">
			<!-- <text class="title">近期余额记录</text> -->
			<view class="head" @click="onActive">
				<text :class="{'active': titleIndex==0}" :data-index="0">充值</text>
				<text :class="{'active': titleIndex==1}" :data-index="1">消费</text>
				<text :class="{'active': titleIndex==2}" :data-index="2">次卡</text>
			</view>
			<view 
				class="balance-box" 
				:class="{'box':index==0}" 
				v-for="(item,index) in listData" 
				:key="index"
			>
				<view class="left" :class="{topUpleft: item.FDataType != 3}">
					<!-- 店名+什么方式的消费(次卡消费、前台充值、小程序会员充值) -->
					<text class="name">{{item.StockName}} {{item.FRemark}} {{item.FDataType==3?item.MemberTimeName+'卡--'+item.MemberTime+'次':''}}</text>
					<text class="tiem">{{item.FDate}}</text>
				</view>
				<view v-if="item.FDataType != 3" class="right">
					<view v-if="item.FDataType == -3" class="right">
						<text class="price">1</text>
						<text class="unit">次</text>
					</view>
					<view v-else class="right">
						<text class="price">{{(item.FAmount).toFixed(2)}}</text><text class="unit">元</text>
						<text v-if="item.FSetAmount!=0" >赠送¥{{(item.FSetAmount).toFixed(2)}}</text>
					</view>
				</view>
				<view v-else class="right">
					<text class="price">{{item.MemberTimeAmt}}</text>
					<text class="unit">元</text>
				</view>
			</view>
			<uni-load-more class="loadmore" :status="tabItem.loadingType"></uni-load-more>
		</view>
		<view class="balance-base">
			<view class="left">
				<text class="base-title">余额</text>
				<text class="price">{{money}}</text>
			</view>
			<text class="topUp" @click="navTo('/pages/MemberTopUp/MemberTopUp')">去充值<text class="yticon icon-you"></text></text>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				id: 0,
				listData: [],
				pageindex: 0,
				money: 0,
				integra: 0,
				totalNumber: 0,
				loadingType: 'more', //加载更多状态
				titleIndex: 0,//
			};
		},
		onLoad(options) {
			this.id=options.id;
			let title = '';
			if(this.id==0){
				title = '余额记录';
				this.balance('MemberShop/GetMemberDeposit');
			}else{
				title = '积分记录';
				this.balance('MemberShop/GetMemberPoint');
			}
			uni.setNavigationBarTitle({
				title
			})
		},
		onReachBottom(){
			if(this.id==0){
				this.balance('MemberShop/GetMemberDeposit');
			}else{
				this.balance('MemberShop/GetMemberPoint');
			}
		},
		methods:{
			navTo(url){
				uni.navigateTo({
					url: url,
				})
			},
			//
			async balance(url){
				if(this.loadingType==='nomore'){
					return;
				}
				this.pageindex++;
				let list = await this.$util.util(url,{PageIndex: this.pageindex,PageSize: 20,},'GET');
				let member = uni.getStorageSync('Members');
				this.integra = member[0].Ponit;
				this.listData = this.listData.concat(list);
				if(list.length==0){
					this.loadingType = 'nomore';
					return;
				}
				this.money = this.listData[0].FDataType==-3?member[0].Amount:this.listData[0].FLastAmount;
				this.totalNumber = this.listData[0].FRowCount;
				//判断是否还有下一页，有是more  没有是nomore
				console.log(this.listData);
				this.loadingType = this.listData.length >= this.listData[0].FRowCount ? 'nomore' : 'more';
			},
			//积分
			// integral(){
			// 	this.$util.util('MemberShop/GetMemberPoint',{PageIndex: 1,PageSize: 10,},'GET').then(res=>{
			// 		console.log(res);
			// 		this.listData = res;
			// 		this.totalNumber = res[0].FRowCount;
			// 	}).catch(error=>console.log(error));
			// },
			
			//点击切换
			onActive(e){
				console.log(e);
				this.titleIndex = e.target.dataset.index
			},
		}
	}
</script>

<style lang="scss">
	
	.title{
		background: #F9F9F9;
		color: #191919;
		font-size: 24upx;
		line-height: 92upx;
		width: 100%;
		padding-left: 30upx;
	}
	.head{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background-color: #fff;
		box-shadow: 0px 6px 12px rgba(0,0,0,0.16);
		display: flex;
		justify-content: space-around;
		position: fixed;
		top: 0upx;
		text{
			padding: 0 50upx;
		}
	}
	.active{
		border-bottom: 2upx solid $base-color;
	}
	
	.box{
		padding: 140upx 20upx 20upx !important;
	}
	.balance,.integral{
		display: flex;
		flex-wrap: wrap;
		.balance-box:last-child,.integral-box:last-child{
			
		}
		.balance-box,.integral-box{
			border-bottom: 2upx solid #F9F9F9;
			height: auto;
			width: 100%;
			padding: 20upx;
			.left{
				width: 550upx;
				font-size: 28upx;
				line-height: 50upx;
				float: left;
				.name{
					color: #707070;
					width: 100%;
					float: left;
				}
				.tiem{
					color: #A7A7A7;
					width: 100%;
					float: left;
				}
			}
			.right{
				float: right;
				// margin-right: 10upx;
				color: #111111;
				.price{
					line-height: 100upx;
					font-size: 20px;
					display: inline-block;
				}
				.unit{
					font-size: 12px;
					line-height: 24upx;
					display: inline-block;
					vertical-align: top;
				}
			}
		}
	}
	
	.balance-base,.integral-base{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80upx;
		border-top: 2upx solid #D8D8D8;
		background-color: #fff;
		.left{
			margin-left: 30upx;
			color: #191919;
			float: left;
			.base-title{
				font-size: 28upx;
				line-height: 38upx;
				display: inline-block;
				vertical-align: top;
			}
			.price{
				font-size: 56upx;
				line-height: 80upx;
			}
		}
		.topUp{
			float: right;
			margin-right: 30upx;
			color: #191919;
			line-height: 80upx;
		}
	}
	.loadmore{
		margin-bottom: 85upx;
	}
	.topUpleft{
		width: 400rpx !important;
	}
	// .integral{
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	.integral-box{
			
	// 	}
	// }
</style>
